<!doctype html>
<html>
    <head>
        <title>bar chart</title>
        <meta charset="utf-8" />
        <style>
         .chart div {
             font: 10px sans-serif;
             background-color: steelblue;
             text-align: right;
             padding: 3px;
             margin: 1px;
             color: white;
         }
        </style>
    </head>
    <body>
        <h1>bar chart</h1>
        <div class="chart">
        </div>

        <script src="../d3.js"></script>
        <script>
         var data = [4, 8, 15, 16, 23, 42, 32];

         var x = d3.scale.linear()
                         .domain([0, d3.max(data)])
                         .range([0, 800]);
         d3.select('.chart')
           .selectAll('div')
           .data(data)
           .enter().append('div')
           .style('width', function (d) {return x(d) + 'px';})
           .text(function(d) {return d;});
        </script>
    </body>
</html>
